<template>
  <div class='carousel_box'>
    <div class='blur-img'>
      <img :src='item.articleCover' :alt='item.articleTitle' @error='handleArticleCardErrorImage'/>
    </div>
    <a :href='ArticlePath.Path+item.id' role='button' class='carousel_body'>
      <img :src='item.articleCover' :alt='item.articleTitle' @error='handleArticleCardErrorImage'/>
    </a>
    <div class='carousel_right'>
      <div class='top_info'>
        <div class='publish_date'>{{ item.createTime }}</div>
        <div class='post_info'>
          <div class='recommend_img'>
            <img src='@/assets/svg/recommend.svg' alt='recommend'>
            <span>置顶</span>
          </div>
          <span class='category'>{{ item.categoryName }}</span>
        </div>
      </div>
      <a class='carousel_title' :href='ArticlePath.Path+item.id' role='button'>{{ item.articleTitle }}</a>
      <a class='carousel_abstract' :href='ArticlePath.Path+item.id' role='button'>{{ item.articleAbstract }}</a>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent } from 'vue'
import { handleArticleCardErrorImage } from '@/utils/avatarUtil'
import { ArticlePath } from '@/models/@types'

export default defineComponent({
  name: 'ArticleTopCarousel',
  computed: {
    ArticlePath() {
      return ArticlePath
    }
  },
  methods: { handleArticleCardErrorImage },
  props:['item'],
  setup(){

  }
})
</script>

